<template>
  <div class="flex-center" style="padding-top: 20px">
    <el-row :gutter="20" style="width: 1400px">
      <el-col :span="6">
        <el-space>
        <el-input placeholder="请输入关键字" v-model="postQuery.keywords" suffix-icon="Search" @keyup.enter.native="getPostPage"></el-input>
          <el-button @click="resetQuery" icon="Refresh">重置</el-button>
        </el-space>
        <el-card class="no-pa" style="margin-top: 10px">
          <template #header>
            <h5><b>帖子分类</b></h5>
          </template>
          <div>
            <div @click="selectCategory(0)" class="cate-list flex-between"
                 :class="{'list-active': postQuery.categoryId==0 ||postQuery.categoryId===''}">
              <div>全部</div>
            </div>
            <div v-for="item in categoryTree" @click="selectCategory(item.categoryId)" class="cate-list flex-between"
                 :class="{'list-active': postQuery.categoryId==item.categoryId}">
              <div>
                {{ item.name }}
              </div>
            </div>
          </div>
        </el-card>
        <el-card style="margin-top: 10px">
          热门话题
          <div style="padding: 10px">
            <el-space>
              <div v-for="item in tagPage.list" @click="postQuery.tagId=item.tagId">
                <el-tag>#{{ item.tagName }}</el-tag>
              </div>
            </el-space>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18">
        <div class="normal-card">
          <div>
            <h5 style="color:white;">
              {{ selectCategoryName }}
              --{{getSelectTag}}
            </h5>
            <el-radio-group v-model="postQuery.sortBy">
              <el-radio-button value="">综合</el-radio-button>
              <el-radio-button value="like_count">最热</el-radio-button>
              <el-radio-button value="create_time">最新</el-radio-button>
            </el-radio-group>
          </div>
          <div style="color: whitesmoke;display: flex;align-items: center">
            查询到<span style="font-size: 30px;"><i>{{postPage.total}}</i></span>条帖子
          </div>
        </div>
        <div v-if="postPage.list && postPage.list.length > 0">
          <div v-for="item in postPage.list" class="box" style="margin-top: 10px"  @click="goPostDetail(item.postId)">
            <el-space>
              <el-avatar :src="item.avatar"></el-avatar>
              <div>
                <el-link>
                  {{ item.nickname }}
                </el-link>
                <div>
                  <el-text size="small">{{ dateDefaultFormat(item.createTime) }}</el-text>
                </div>
              </div>
              <el-space v-if="item.tags">
                <el-tag v-for="tag in item.tags">{{ tag.tagName }}</el-tag>
              </el-space>
            </el-space>
            <div style="padding: 5px 0">
              <h5 class="link-text">{{ item.title }}</h5>
            </div>
            <span style="font-size: 14px">
              {{ item.content }}
            </span>
            <div style="padding: 5px 0">
              <el-space>
                <el-space :size="3">
                  <el-icon>
                    <IconLike></IconLike>
                  </el-icon>
                  <span style="font-size: 13px;font-weight: 300">{{ item.likes }}</span>
                </el-space>
                <el-space :size="3">
                  <el-icon>
                    <ChatDotRound/>
                  </el-icon>
                  <span style="font-size: 13px;font-weight: 300">{{ item.likes }}</span>
                </el-space>
              </el-space>
            </div>
          </div>
        </div>
        <div v-else>
          <el-empty description="暂无帖子。。。快去发布吧" />
        </div>
        <div class="flex-end" style="margin-top: 10px">
          <el-pagination
              v-model:current-page="postQuery.pageNum"
              v-model:page-size="postQuery.pageSize"
              :total="postPage.total"
              background
              layout="prev, pager, next"
          ></el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import {ref, reactive, onMounted, computed, watch,} from 'vue'
import {reqGetPostCategoryTreeList, reqGetPostPage} from "@/api/social/posts";
import {dateDefaultFormat} from '@/utils'
import {useRouter, useRoute} from "vue-router";
import {reqGetForumTagPage} from "@/api/social/forum/tag";

const router = useRouter()
const route = useRoute()
let categoryTree = ref([])
let postQuery = reactive({
  pageNum: 1,
  keywords:route.query.keyword,
  pageSize: 10,
  categoryId: route.query.categoryId,
  tagId: null,
  sortBy:'',
  isAsc:true
})
let postPage = reactive({
  pageNum: 1,
  total: 0,
  list: []
})

let tagPage = reactive({
  pageNum: 1,
  total: 0,
  list: []
})

let resetQuery=()=>{
  postQuery.keywords = ''
  postQuery.tagId = null
  postQuery.categoryId = ''
  //清空query值
  router.replace({
    ...route,
    query: {},
  });
}
let getSelectTag =computed(() => {
  return tagPage.list.find(item => item.tagId == postQuery.tagId)?.tagName
})
let selectCategory = (categoryId) => {
  postQuery.categoryId = categoryId
}
let selectCategoryName = computed(() => {
  let node = categoryTree.value.find(item => item.categoryId == postQuery.categoryId)
  if (!node) {
    return "全部分类";
  }
  return node.name
})
let goPostDetail = (postId: string) => {
  router.push({
    name: "post-detail",
    query: {
      postId,
    },
  });
};
let getForumTagPage = async () => {
  let res = await reqGetForumTagPage({
    pageNum: 1,
    pageSize: 10,
  })
  Object.assign(tagPage, res.data)
}
let getPostPage = async () => {
  if (postQuery.categoryId == 0){
    postQuery.categoryId = ''
  }
  if (postQuery.sortBy=='like_count'){
    postQuery.isAsc=false
  }
  let res = await reqGetPostPage(postQuery)
  Object.assign(postPage, res.data)
}
let getCategoryTreeList = async () => {
  let res = await reqGetPostCategoryTreeList()
  categoryTree.value = res.data
}
onMounted(() => {
  getCategoryTreeList()
  getPostPage()
  getForumTagPage()
})
watch([() => postQuery.pageNum, () => postQuery.pageSize, () => postQuery.categoryId,
  ()=>postQuery.tagId,() => postQuery.sortBy], () => {
  getPostPage();
})
</script>

<style scoped>
.normal-card {
  padding: 10px;
  border: 1px solid var(--el-border-color);
  margin: 10px 0;
  border-radius: 10px;
  background: linear-gradient(to right, #1c7eda, #0e4ba5);
  display: flex;
  justify-content: space-between;
}

.cate-list {
  padding: 10px;
  border: solid 1px var(--el-border-color);
}

.cate-list:hover {
  background-color: var(--el-border-color);
}

.list-active {
  background-color: var(--el-border-color);
}
</style>
<style>
.no-pa .el-card__body {
  padding: 0;
}
</style>
